<!DOCTYPE html>
<html>
<head>
<title>Fig 2.30 Energy Levels</title>
</head>
<body>
<canvas id="physicsCanvas" width="750" height="520"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';

    // Helper function to draw an arrow
    function drawArrow(fromx, fromy, tox, toy) {
        const headlen = 10;
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // Helper function to draw nuclide symbol with mass and atomic number
    function drawNuclide(A, Z, S, x, y) {
        const baseFontSize = 20;
        const scriptFontSize = 12;
        
        ctx.font = `${baseFontSize}px Arial`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        const metrics = ctx.measureText(S);
        const symbolWidth = metrics.width;
        ctx.fillText(S, x, y);

        ctx.font = `${scriptFontSize}px Arial`;
        ctx.textAlign = 'right';
        const scriptX = x - symbolWidth / 2;
        ctx.fillText(A, scriptX, y - baseFontSize / 2 + 3);
        ctx.fillText(Z, scriptX, y + baseFontSize / 2);
    }

    // Main drawing logic
    // Define coordinates
    const y_Ca_gs = 380;
    const y_Ca_es = 260; 
    const y_Sc_gs = 320;
    const y_Sc_es = 200;
    const y_Ti_gs = 250;
    const y_Ti_es = 130;

    const x_Ca_start = 130, x_Ca_end = 250;
    const x_Sc_start = 320, x_Sc_end = 440;
    const x_Ti_start = 510, x_Ti_end = 630;

    // Draw bounding box
    ctx.strokeRect(20, 40, 710, 440);

    // --- Draw energy levels and their labels ---
    
    // Calcium (Ca)
    ctx.beginPath();
    ctx.moveTo(x_Ca_start, y_Ca_gs);
    ctx.lineTo(x_Ca_end, y_Ca_gs);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x_Ca_start, y_Ca_es);
    ctx.lineTo(x_Ca_end, y_Ca_es);
    ctx.stroke();

    ctx.font = '16px Arial';
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText('0.0 MeV (0⁺)', x_Ca_start - 15, y_Ca_gs);
    ctx.fillText('1.8 MeV (0⁺)', x_Ca_start - 15, y_Ca_es);
    
    // Scandium (Sc)
    ctx.beginPath();
    ctx.moveTo(x_Sc_start, y_Sc_gs);
    ctx.lineTo(x_Sc_end, y_Sc_gs);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x_Sc_start, y_Sc_es);
    ctx.lineTo(x_Sc_end, y_Sc_es);
    ctx.stroke();
    
    ctx.textAlign = 'center';
    ctx.fillText('0.0 MeV (0⁺)', (x_Sc_start + x_Sc_end) / 2, y_Sc_gs - 20);
    ctx.fillText('1.8 MeV (0⁺)', (x_Sc_start + x_Sc_end) / 2, y_Sc_es - 20);

    // Titanium (Ti)
    ctx.beginPath();
    ctx.moveTo(x_Ti_start, y_Ti_gs);
    ctx.lineTo(x_Ti_end, y_Ti_gs);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x_Ti_start, y_Ti_es);
    ctx.lineTo(x_Ti_end, y_Ti_es);
    ctx.stroke();

    ctx.fillText('0.0 MeV (0⁺)', (x_Ti_start + x_Ti_end) / 2, y_Ti_gs - 20);
    ctx.fillText('1.8 MeV (0⁺)', (x_Ti_start + x_Ti_end) / 2, y_Ti_es - 20);

    // --- Draw connecting lines between levels ---
    // Ground states
    ctx.beginPath();
    ctx.moveTo(x_Ca_end, y_Ca_gs);
    ctx.lineTo(x_Sc_start, y_Sc_gs);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x_Sc_end, y_Sc_gs);
    ctx.lineTo(x_Ti_start, y_Ti_gs);
    ctx.stroke();
    // Excited states
    ctx.beginPath();
    ctx.moveTo(x_Ca_end, y_Ca_es);
    ctx.lineTo(x_Sc_start, y_Sc_es);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x_Sc_end, y_Sc_es);
    ctx.lineTo(x_Ti_start, y_Ti_es);
    ctx.stroke();

    // --- Draw nuclide labels below the levels ---
    const nuclideY = 425;
    drawNuclide('42', '20', 'Ca', (x_Ca_start + x_Ca_end) / 2, nuclideY);
    drawNuclide('42', '21', 'Sc', (x_Sc_start + x_Sc_end) / 2, nuclideY);
    drawNuclide('42', '22', 'Ti', (x_Ti_start + x_Ti_end) / 2, nuclideY);

    // --- Draw transitions I and II ---
    // Start point is on the diagonal line connecting Ca(gs) and Sc(gs)
    const startX = 280;
    const startY = y_Ca_gs + (y_Sc_gs - y_Ca_gs) / (x_Sc_start - x_Ca_end) * (startX - x_Ca_end);

    const endI_X = x_Ca_end;
    const endI_Y = y_Ca_es;
    const endII_X = x_Ca_end;
    const endII_Y = y_Ca_gs;
    
    drawArrow(startX, startY, endI_X, endI_Y);
    drawArrow(startX, startY, endII_X, endII_Y);
    
    // Add labels for transitions
    ctx.font = 'italic 18px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('I', 270, 305);
    ctx.fillText('II', 270, 365);

    // --- Draw Figure Caption ---
    ctx.font = '18px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 2.30', canvas.width / 2, 500);

</script>
</body>
</html>